<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片轮播--可翻转、可放大缩小</title>

<link href="css/swiper.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/index.css"/>

</head>
<body>

<div class="img_swiper">
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide">
				<div class="swiper_slide_img" data-url="img/img1.jpg">
					<img src="img/img1.jpg" class="img" alt="">
				</div>
			</div>
			<div class="swiper-slide">
				<div class="swiper_slide_img" data-url="img/img2.jpg">
					<img src="img/img2.jpg" class="img" alt="">
				</div>
			</div>
			<div class="swiper-slide">
				<div class="swiper_slide_img" data-url="img/img3.jpg">
					<img src="img/img3.jpg" class="img" alt="">
				</div>
			</div>
			<div class="swiper-slide">
				<div class="swiper_slide_img" data-url="img/img4.jpg">
					<img src="img/img4.jpg" class="img" alt="">
				</div>
			</div>
			<div class="swiper-slide">
				<div class="swiper_slide_img" data-url="img/img5.jpg">
					<img src="img/img5.jpg" class="img" alt="">
				</div>
			</div>
		</div>
	</div>
	<div class="swiper-button-prev one"></div>
	<div class="swiper-button-next one"></div>
</div>
<!-- 图片放大 -->
<div class="pic_container">
	<div class="pic_container_inner">
		<img src="" id="box" style="transform: scale(1.5);" alt="">
	</div>
</div>

<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
<script src="js/imgZoom.js" type="text/javascript" charset="utf-8"></script>

</body>	
</html>
